<template>
  <div id="wrapper">
    <h1 class="headline">
      <span class="accent">演示</span>  插件配置
    </h1>
    <div class="description">
      本页面为模板，实现依据路由动态加载内容
    </div>
    <div class="form">
      <a-button type="primary" @click="renderContents()">加载内容</a-button>
    </div>
  </div>
</template>

<script setup>

import { message } from "ant-design-vue";
import { ref } from "vue";

function renderContents() {
  message.info("渲染内容",3);
}

</script>

<style lang="less" scoped>
.headline {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -1.2px;
  margin: 10px auto 20px;
}

html:not(.dark) .accent {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  letter-spacing: 1.5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  line-height: 1.5;
  font-size: 16px;
  margin: 10px auto 15px;
}

.form{
  margin-top: 40px;
}
</style>